<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html {
            height: 100%;
            background: -webkit-radial-gradient(center, ellipse, #f0a99c 0%, #b30b94 52%, #540f0f 99%, #540f0f 100%);
            background: radial-gradient(ellipse at center, #f0a99c 0%, #b30b94 52%, #540f0f 99%, #540f0f 100%);
        }
        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        .centerText {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="center">
    <div class="centerText">
        <h1>Mouse Controlled <a href="http://en.wikipedia.org/wiki/Low-frequency_oscillation" target="_blank">LFO</a> 2</h1>
        <h3>Adjust volume first!</h3>
        <h3>Click Start and move the mouse.</h3>
        <button onclick="toggleSound(this)">
            <h3>Start</h3>
        </button>
        <input type="range" id="lfoAmplitudeSlider" min="1" max="1000" value="200" />
        <p>
            <label>LFO amplitude: <span id="lfoAmplitude">200</span>
            </label>
        </p>
        <p>
            <label>Sound Base Frequency: <span id="soundFrequency">0</span>
            </label>
        </p>
        <p>
            <label>LFO Frequency: <span id="lfoFrequency">0</span>
            </label>
        </p>
    </div>
</div>
</body>
</html>
<script>
    var audioContext;
    var soundOscillator;
    var lfo;
    var lfoGain;
    var gainNode;
    var isPlaying = false;

    function initSound() {
        // This is not needed any more
        //var AudioContext = window.AudioContext || window.webkitAudioContext;
        // https://developers.google.com/web/updates/2014/07/Web-Audio-Changes-in-m36?hl=en
        audioContext = new AudioContext();

        // Oscillator for sound
        soundOscillator = audioContext.createOscillator();
        soundOscillator.type = "sine";
        soundOscillator.frequency.value = 0;
        soundOscillator.start(0);

        // LFO
        // Used for changing the frequency of the sound
        // oscillator.
        lfo = audioContext.createOscillator();
        lfo.type = "sine";
        lfo.frequency.value = 0;
        lfo.start(0);

        // Controls the amplitude of LFO applied.
        // An oscillator node produces values
        // in the 0 - 1 range. By applying a
        // gain of 200 to the LFO we can make
        // it produce values in the 0 - 200
        // range.
        lfoGain = audioContext.createGain();
        lfoGain.gain.value = 200;

        // Controls the volume
        gainNode = audioContext.createGain();

        // Wire them up
        lfo.connect(lfoGain);
        lfoGain.connect(soundOscillator.frequency);
        soundOscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);
    }

    function toggleSound(toggleButton) {
        isPlaying = !isPlaying;
        if (isPlaying) {
            gainNode.gain.value = 1;
            toggleButton.innerHTML = "<h3>Stop</h3>"
        } else {
            soundOscillator.frequency.value = 0;
            lfo.frequency.value = 0;
            gainNode.gain.value = 0;
            toggleButton.innerHTML = "<h3>Start</h3>"
        }
    }

    function onMousemove(event) {
        if (isPlaying) {
            var lfoFrequency = Math.round(event.clientX / window.innerWidth * 30);
            lfo.frequency.value = lfoFrequency;
            lfoFrequencySpan.innerHTML = lfoFrequency;

            var soundFrequency = Math.round(event.clientY / window.innerHeight * 1000) + 200;
            soundOscillator.frequency.value = soundFrequency;
            soundFrequencySpan.innerHTML = soundFrequency;
        }
    }

    function initControls() {
        soundFrequencySpan = document.getElementById("soundFrequency");
        lfoFrequencySpan = document.getElementById("lfoFrequency");

        var lfoAmplitudeSlider = document.getElementById("lfoAmplitudeSlider");

        var lfoAmplitudeSpan = document.getElementById("lfoAmplitude");

        document.addEventListener("mousemove", onMousemove, false);
        lfoAmplitudeSlider.addEventListener("change", function() {
            lfoGain.gain.value = this.value;
            lfoAmplitudeSpan.innerHTML = this.value;
        });
        lfoAmplitudeSlider.addEventListener("mousemove", function() {
            lfoGain.gain.value = this.value;
            lfoAmplitudeSpan.innerHTML = this.value;
        });

    }

    function init() {
        initSound();
        initControls();
    }

    init();
</script>